<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="${ctxPath!}/static/wap/css/amazeui.min.css">
<link rel="stylesheet" href="${ctxPath!}/static/wap/css/wap.css?2">
<title>首页</title>
</head>
<body>
	<div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
		<a href="#top" title=""> <img class="am-gotop-icon-custom"
			src="${ctxPath!}/static/wap/img/goTop.png" />
		</a>
	</div>

	<div class="pet_mian" id="top">
		<div data-am-widget="slider" class="am-slider am-slider-a1"
			data-am-slider='{"directionNav":false}'>
			<ul class="am-slides">
				<li><img src="${ctxPath!}/static/wap/img/fl01.png">
					<div class="pet_slider_font">
						<span class="pet_slider_emoji"> (╭￣3￣)╭♡ </span> <span>“大白”有望成为现实：充气机器人研究取得进展</span>
					</div>
					<div class="pet_slider_shadow"></div></li>
				<li><img src="${ctxPath!}/static/wap/img/fl02.png">
					<div class="pet_slider_font">
						<span class="pet_slider_emoji"> []~(￣▽￣)~* </span> <span>已然魔性的雪橇犬哈士奇
							—《雪地狂奔》</span>
					</div>
					<div class="pet_slider_shadow"></div></li>
				<li><img src="${ctxPath!}/static/wap/img/fl03.png">
					<div class="pet_slider_font">
						<span class="pet_slider_emoji"> (｡・`ω´･) </span> <span>《星际争霸2:虚空之遗》国服过审!</span>
					</div>
					<div class="pet_slider_shadow"></div></li>
			</ul>
		</div>


		<div class="pet_circle_nav">
			<ul class="pet_circle_nav_list">
				<li><a href="${ctxPath!}/wap/cms/news?color=text" class="iconfont pet_nav_xinxianshi ">&#xe61e;</a><span>新鲜事</span></li>
				<li><a href="${ctxPath!}/wap/cms/quwen?color=quwen" class="iconfont pet_nav_zhangzhishi ">&#xe607;</a><span>趣闻</span></li>
				<li><a href="${ctxPath!}/wap/cms/vedio?color=vedio" class="iconfont pet_nav_kantuya ">&#xe62c;</a><span>视频</span></li>
				<li><a href="${ctxPath!}/wap/cms/subject?color=subject" class="iconfont pet_nav_mengzhuanti ">&#xe622;</a><span>专题</span></li>
				<li><a href="${ctxPath!}/wap/cms/reader?color=reader" class="iconfont pet_nav_meirong ">&#xe629;</a><span>阅读</span></li>
				<li><a href="${ctxPath!}/wap/cms/img?color=img" class="iconfont pet_nav_yiyuan ">&#xe602;</a><span>图集</span></li>
				<li><a href="${ctxPath!}/wap/cms/activity?color=activity" class="iconfont pet_nav_dianpu ">&#xe604;</a><span>活动</span></li>
				<li><a href="javascript:;" class="iconfont pet_nav_gengduo ">&#xe600;</a><span>更多</span></li>
			</ul>
			<div class="pet_more_list">
				<div class="pet_more_list_block">
					<div class="iconfont pet_more_close">×</div>
					<div class="pet_more_list_block">
						<div class="pet_more_list_block_name">
							<div class="pet_more_list_block_name_title">阅读 Read</div>
							<a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/news?color=text"> <i
								class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
								<div class="pet_more_list_block_line_font">新鲜事</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/quwen?color=quwen"> <i
								class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
								<div class="pet_more_list_block_line_font"  >趣闻</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/reader?color=reader" > <i
								class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
								<div class="pet_more_list_block_line_font" >阅读</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/subject?color=subject"> <i
								class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe622;</i>
								<div class="pet_more_list_block_line_font" >专题</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/vedio?color=vedio"> <i
								class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe629;</i>
								<div class="pet_more_list_block_line_font" >视频</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/activity?color=activity"> <i
								class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe602;</i>
								<div class="pet_more_list_block_line_font">活动</div>
							</a>
							<div
								class="pet_more_list_block_name_title pet_more_list_block_line_height">服务
								Service</div>
							<a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/news?color=text"> <i
								class="iconfont pet_nav_xinxianshi pet_more_list_block_line_ico">&#xe61e;</i>
								<div class="pet_more_list_block_line_font">新鲜事</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/quwen?color=quwen"> <i
								class="iconfont pet_nav_zhangzhishi pet_more_list_block_line_ico">&#xe607;</i>
								<div class="pet_more_list_block_line_font"  >趣闻</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/reader?color=reader" > <i
								class="iconfont pet_nav_kantuya pet_more_list_block_line_ico">&#xe62c;</i>
								<div class="pet_more_list_block_line_font" >阅读</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/subject?color=subject"> <i
								class="iconfont pet_nav_mengzhuanti pet_more_list_block_line_ico">&#xe622;</i>
								<div class="pet_more_list_block_line_font" >专题</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/vedio?color=vedio"> <i
								class="iconfont pet_nav_bk pet_more_list_block_line_ico">&#xe629;</i>
								<div class="pet_more_list_block_line_font" >视频</div>
							</a> <a class="pet_more_list_block_line" href="${ctxPath!}/wap/cms/activity?color=activity"> <i
								class="iconfont pet_nav_wd pet_more_list_block_line_ico">&#xe602;</i>
								<div class="pet_more_list_block_line_font">活动</div>
							</a>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="pet_content_main">
			<div data-am-widget="list_news"
				class="am-list-news am-list-news-default">
				<div class="am-list-news-bd">
					<ul class="am-list">
						<!--缩略图在标题右边-->
							@for(article in articleList.list){
							 @if(article.color == 'text'){
								 <li
								class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
								<div class="pet_list_one_info">
									<div class="pet_list_one_info_l">
										<div class="pet_list_one_info_ico">
											<img src="${imgServer!}/${article.image}" alt="">
										</div>
										<div class="pet_list_one_info_name">${article.title!}</div>
									</div>
									<div class="pet_list_one_info_r">
										<div class="pet_list_tag pet_list_tag_xxs"><a href="${ctxPath!}/wap/cms/news?color=news" class="">新鲜事</a></div>
									</div>
								</div>
								<div class=" am-u-sm-8 am-list-main pet_list_one_nr">
									<h3 class="am-list-item-hd pet_list_one_bt">
										<a href="${ctxPath!}/wap/cms/newsDetail/${article.id!}" class="">${article.title!}</a>
									</h3>
									<div class="am-list-item-text pet_list_one_text">${strutil.subStringLen(article.description!'',30)} ...</div>
	
								</div>
								<div class="am-u-sm-4 am-list-thumb">
									<a href="${ctxPath!}/wap/cms/newsDetail/${article.id!}" class=""> <img src="${imgServer!}/${article.image}"
										class="pet_list_one_img" alt="" />
									</a>
								</div>
							</li>
							@}else if(article.color == 'vedio'){
							 	<li
							class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
							<div class="pet_list_one_info">
								<div class="pet_list_one_info_l">
									<div class="pet_list_one_info_ico">
										<img src="${imgServer!}/${article.image}" alt="">
									</div>
									<div class="pet_list_one_info_name">${article.title!}</div>
								</div>
								<div class="pet_list_one_info_r">
									<div class="pet_list_tag pet_video_tag"><a href="${ctxPath!}/wap/cms/vedio?color=vedio" class="">视频</a></div>
								</div>
							</div>
							<div class=" am-u-sm-8 am-list-main pet_list_one_nr">
								<h3 class="am-list-item-hd pet_list_one_bt">
									<a href="${ctxPath!}/wap/cms/vedioDetail/${article.id!}" class="">${article.title!}</a>
								</h3>
								<div class="am-list-item-text pet_list_one_text">${strutil.subStringLen(article.description!'',30)} ...</div>

							</div>
							<div class="am-u-sm-4 am-list-thumb pet_video_info">
								<div class="pet_video_info_tag">
									<i class="iconfont">&#xe62d;</i>03:50
								</div>
								<a href="${ctxPath!}/wap/cms/vedioDetail/${article.id!}" class=""> <img src="${imgServer!}/${article.image}"
									class="pet_list_one_img" alt="我很囧，你保重....晒晒旅行中的那些囧！" />
								</a>
							</div>
						</li>
						@}else if(article.color == 'img'){
							<li class="am-g am-list-item-desced pet_list_one_block">
							<div class="pet_list_one_info">
								<div class="pet_list_one_info_tytj">
									<i
										class="iconfont pet_nav_kantuya pet_more_list_block_line_ico pet_list_tytj_ico">&#xe607;</i>${article.title!}
								</div>
								<div class="pet_list_one_info_r">
									<div class="pet_list_tag pet_list_tag_kty"><a href="${ctxPath!}/wap/cms/img?color=img" class=""> 
											图集</a></div>
								</div>
							</div>
							<div class=" am-list-main">
								<ul data-am-widget="gallery"
									class="am-gallery am-avg-sm-3
  am-avg-md-3 am-avg-lg-3 am-gallery-default pet_list_one_list pet_list_one_tytj">
  								@var imgList=strutil.stringToList(article.moreimage,5);
								@for(article1 in imgList!){
									<li>
										<div class="am-gallery-item">
											<a href="${ctxPath!}/wap/cms/imgDetail/${article.id!}" class=""> <img src="${article1}"
												alt="${article1}" />
											</a>
										</div>
									</li>
								 @}	
								</ul>
						</li>
							@}else if(article.color == 'subject'){
							
							<li class="am-g am-list-item-desced pet_list_one_block">
							<div class="pet_list_one_info">
								<div class="pet_list_one_info_l">
									<div class="pet_list_one_info_ico">
										<img src="${imgServer!}/${article.image}" alt="">
									</div>
									<div class="pet_list_one_info_name">zscat</div>
								</div>
								<div class="pet_list_one_info_r">
									<div class="pet_list_tag pet_list_tag_mzt"><a href="${ctxPath!}/wap/cms/subject?color=subject" class="">萌专题</a></div>
								</div>
							</div>
							<div class=" am-list-main">
								<h3 class="am-list-item-hd pet_list_one_bt">
									<a href="${ctxPath!}/wap/cms/subjectDetail/${article.id!}" class="">${article.title!}</a>
								</h3>
								<div class="pet_list_zt_img">
									<a href="${ctxPath!}/wap/cms/subjectDetail/${article.id!}" class="">
									<img src="${imgServer!}/${article.image}" alt="">
									</a>
								</div>

								<div class="am-list-item-text pet_list_two_text">${strutil.subStringLen(article.description!'',30)} ...</div>

							</div>
						</li>
						@}else if(article.color == 'activity'){
							
							<li class="am-g am-list-item-desced pet_list_one_block">
							<div class="pet_list_one_info">
								<div class="pet_list_one_info_l">
									<div class="pet_list_one_info_ico">
										<img src="${imgServer!}/${article.image}" alt="">
									</div>
									<div class="pet_list_one_info_name">zscat</div>
								</div>
								<div class="pet_list_one_info_r">
									<div class="pet_list_tag pet_list_tag_mzt"><a href="${ctxPath!}/wap/cms/activity?color=activity" class="">活动</a></div>
								</div>
							</div>
							<div class=" am-list-main">
								<h3 class="am-list-item-hd pet_list_one_bt">
									<a href="${ctxPath!}/wap/cms/activityDetail/${article.id!}" class="">${article.title!}</a>
								</h3>
								<div class="pet_list_zt_img">
									<a href="${ctxPath!}/wap/cms/activityDetail/${article.id!}" class="">
									<img src="${imgServer!}/${article.image}" alt="">
									</a>
								</div>

								<div class="am-list-item-text pet_list_two_text">${strutil.subStringLen(article.description!'',30)} ...</div>

							</div>
						</li>
						@}else if(article.color == 'quwen'){
							
					      <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_list_one_block">
					        <div class="pet_list_one_info">
					            <div class="pet_list_one_info_l">
					                <div class="pet_list_one_info_ico"><img src="${imgServer!}/${article.image}" alt=""></div>
					                <div class="pet_list_one_info_name">zscat</div>
					            </div>
					            <div class="pet_list_one_info_r">
					                <div class="pet_list_tag pet_list_tag_zzs"><a href="${ctxPath!}/wap/cms/quwen?color=quwen" class="">趣闻</a></div>
					            </div>
					        </div>
					        <div class=" am-u-sm-8 am-list-main pet_list_one_nr">
					            <h3 class="am-list-item-hd pet_list_one_bt"><a href="${ctxPath!}/wap/cms/quwenDetail/${article.id!}" class="">${article.title!}</a></h3>
					            <div class="am-list-item-text pet_list_one_text">${strutil.subStringLen(article.description!'',30)}</div>
					
					        </div>
					          <div class="am-u-sm-4 am-list-thumb">
					            <a href="${ctxPath!}/wap/cms/quwenDetail/${article.id!}" class="">
					              <img src="${imgServer!}/${article.image}" class="pet_list_one_img" alt="我很囧，你保重....晒晒旅行中的那些囧！"/>
					            </a>
					          </div>
					      </li>
						@}else if(article.color == 'reader'){
						 <li class="am-g am-list-item-desced pet_list_one_block">
						              <div class="pet_list_one_info">
						            <div class="pet_list_one_info_l">
						                <div class="pet_list_one_info_ico"><img src="${imgServer!}/${article.image}" alt=""></div>
						                <div class="pet_list_one_info_name">zscat</div>
						            </div>
						            <div class="pet_list_one_info_r">
						                <div class="pet_list_tag pet_list_tag_stj"><a href="${ctxPath!}/wap/cms/reader?color=reader" class="">阅读</a></div>
						            </div>
						        </div>
						        <div class=" am-list-main">
						            <h3 class="am-list-item-hd pet_list_one_bt"><a href="${ctxPath!}/wap/cms/readerDetail/${article.id!}" class="">${article.title!}</a></h3>
						  <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3
						  am-avg-md-3 am-avg-lg-3 am-gallery-default pet_list_one_list" >
						      @var imgList1=strutil.stringToList(article.moreimage,2);
								@for(article2 in imgList1!){
									<li>
						        <div class="am-gallery-item">
						            <a href="${ctxPath!}/wap/cms/readerDetail/${article.id!}" class="">
						              <img src="${article2}"  alt="${article2}"/>
						            </a>
						        </div>
						      </li>
								 @}
						      
						  </ul>
						            <div class="am-list-item-text pet_list_two_text">${strutil.subStringLen(article.description!'',30)}</div>
						        </div>
						      </li>
						
					   @}
							
						
							
				@}
						
						
						
						
						
						
					</ul>
				</div>

			</div>

		</div>
		<div class="pet_article_dowload pet_dowload_more_top_off">
			<div class="pet_article_dowload_title">关于Amaze UI</div>
			<div class="pet_article_dowload_content pet_dowload_more_top_bg">
				<div class="pet_article_dowload_triangle pet_dowload_more_top_san"></div>
				<div class="pet_article_dowload_ico">
					<img src="${ctxPath!}/static/wap/img/footdon.png" alt="">
				</div>
				<div class="pet_article_dowload_content_font">Amaze UI
					以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。</div>
				<div class="pet_article_dowload_all">
					<a href="###" class="pet_article_dowload_Az am-icon-apple"> App
						store</a> <a href="###" class="pet_article_dowload_Pg am-icon-android">
						Android</a>
				</div>
			</div>
			<div class="pet_article_footer_info">Copyright(c)2015 Amaze UI
				All Rights Reserved</div>
		</div>
	</div>

	<script src="${ctxPath!}/static/wap/js/jquery.min.js"></script>
	<script src="${ctxPath!}/static/wap/js/amazeui.min.js"></script>
	<script>
$(function(){

    // 动态计算新闻列表文字样式
    auto_resize();
    $(window).resize(function() {
        auto_resize();
    });
    $('.am-list-thumb img').load(function(){
        auto_resize();
    });

    $('.am-list > li:last-child').css('border','none');
    function auto_resize(){
        $('.pet_list_one_nr').height($('.pet_list_one_img').height());

    }
        $('.pet_nav_gengduo').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
       });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });
});

</script>
</body>
</html>